<template>
    <div class="filter-container">
        <span class="d2-mr-10 d2-mb-10 s-display-inline-block" v-for="(item, index) in searchItems" :key="index">
            <!--下拉-->
            <el-select
                v-if="item.type=='select'"
                v-model="searchData[item.key]"
                :placeholder="item.placeholder"
                class="search-input"
                size="medium"

            >
                <el-option v-for="opt in item.options" :key="opt.value" :label="opt.key" :value="opt.value"></el-option>
            </el-select>
            <el-select
                v-else-if="item.type=='selecturl'"
                v-model="searchData[item.key]"
                :placeholder="item.placeholder"
                @visible-change="getOptionUrl(item.optionsUrl)"
                class="search-input"
                size="medium"

            >
                <el-option v-for="opt in selectData" :key="opt.value" :label="opt.key" :value="opt.value"></el-option>
            </el-select>
            <!--分组选择-->
            <el-select
                v-else-if="item.type=='selectGroup'"
                v-model="searchData[item.key]"
                :placeholder="item.placeholder"
                class="search-input"
                size="medium"
            >
                <el-option-group
                    v-for="opt in item.options"
                    :key="opt.value"
                    :label="opt.key"
                    :value="opt.value"
                >
                    <el-option
                        v-for="item in opt.options"
                        :key="item.value"
                        :label="item.key"
                        :value="item.value">
                    </el-option>
                </el-option-group>
            </el-select>

            <!-- 时间选择 -->
            <!--:picker-options="item.pickerOptions || pickerOptions"-->
            <el-date-picker
                v-else-if="isDatePicker(item.type)"
                v-model="searchData[item.key]"
                :placeholder="item.placeholder || '选择时间'"
                :id="item.id"
                :type="item.type"
                :start-placeholder="item.splaceholder || (item.placeholder ? item.placeholder + $t('page.system.date.start') : $t('page.system.date.start'))"
                :end-placeholder="item.eplaceholder || (item.placeholder ? item.placeholder + $t('page.system.date.end') : $t('page.system.date.end'))"
                value-format="yyyy-MM-dd"
                class="filter-item"
                :clearable="!item.defaultValue"
                :default-time="['00:00:00', '23:59:59']"
                size="medium"
            ></el-date-picker>


            <el-input
                v-else
                v-model="searchData[item.key]"
                :placeholder="item.placeholder"
                clearable
                class="search-input"
                size="medium"
            ></el-input>
        </span>
        <el-button type="primary" @click="searchEvent" size="medium">{{ $t('page.system.button.search') }}</el-button>
    </div>
</template>

<script>
    export default {
        name: "search",
        props: {
            searchItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            searchLoading: {
                type: Boolean,
                default() {
                    return false;
                }
            }
        },
        data() {
            return {
                searchData: {},
                selectData: [], //获取远程下拉选项
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "今天",
                            onClick(picker) {
                                const start = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime()
                                ); // 当前日期0点到23：59：59
                                const end = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() +
                                    24 * 60 * 60 * 1000 -
                                    1
                                );
                                start.setTime(start.getTime());
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "昨天",
                            onClick(picker) {
                                const start = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() -
                                    24 * 60 * 60 * 1000
                                ); // 昨天日期0点到23：59：59
                                const end = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() -
                                    24 * 60 * 60 * 1000 -
                                    1
                                );
                                start.setTime(start.getTime());
                                end.setTime(start.getTime() + 24 * 60 * 60 * 1000 - 1);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "前天",
                            onClick(picker) {
                                const start = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() -
                                    24 * 60 * 60 * 1000 * 2
                                ); // 昨天日期0点到23：59：59
                                const end = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() -
                                    24 * 60 * 60 * 1000 * 2 -
                                    1
                                );
                                start.setTime(start.getTime());
                                end.setTime(start.getTime() + 24 * 60 * 60 * 1000 - 1);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "本周",
                            onClick(picker) {
                                const nowDayOfWeek = new Date().getDay(); //今天本周的第几天
                                const minusDay = nowDayOfWeek != 0 ? nowDayOfWeek - 1 : 6; //减去的天数
                                const start = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() -
                                    24 * 60 * 60 * 1000 * minusDay
                                ); // 本周日期0点到23：59：59
                                const end = new Date(
                                    new Date(new Date().toLocaleDateString()).getTime() +
                                    24 * 60 * 60 * 1000 -
                                    1
                                );
                                start.setTime(start.getTime());
                                end.setTime(start.getTime() + 24 * 60 * 60 * 1000 * 7 - 1);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "上周",
                            onClick(picker) {
                                const currentDate = new Date(); //获取当前时间
                                const week = currentDate.getDay(); //返回date是一周中的某一天
                                const millisecond = 1000 * 60 * 60 * 24; //一天的毫秒数
                                const minusDay = week != 0 ? week - 1 : 6; //减去的天数
                                const currentWeekDayOne = new Date(
                                    currentDate.getTime() - millisecond * minusDay
                                ); //获得当前周的第一天
                                const priorWeekLastDay =
                                    new Date(
                                        new Date(currentWeekDayOne.getTime() - millisecond).setHours(
                                            0,
                                            0,
                                            0,
                                            0
                                        )
                                    ).getTime() + 86399999; //上周最后一天即本周开始的前一天 0:00
                                const priorWeekFirstDay = new Date(
                                    new Date(priorWeekLastDay - millisecond * 6).setHours(
                                        0,
                                        0,
                                        0,
                                        0
                                    )
                                ).getTime(); //上周的第一天 23:59
                                const start = new Date(priorWeekFirstDay);
                                const end = new Date(priorWeekLastDay);
                                start.setTime(start.getTime());
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "本月",
                            onClick(picker) {
                                const currentMonth = new Date(); //本月
                                currentMonth.setDate(1);
                                currentMonth.setHours(0);
                                currentMonth.setSeconds(0);
                                currentMonth.setMinutes(0);
                                const lastMonth = new Date(); // 下月
                                if (currentMonth.getMonth() == 11) {
                                    lastMonth.setMonth(0);
                                } else {
                                    lastMonth.setMonth(currentMonth.getMonth() + 1);
                                }
                                lastMonth.setDate(1);
                                lastMonth.setHours(23);
                                lastMonth.setSeconds(59);
                                lastMonth.setMinutes(59);
                                const start = currentMonth;
                                const end = lastMonth;
                                start.setTime(start.getTime());
                                end.setTime(end.getTime() - 24 * 60 * 60 * 1000 - 1);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "上月",
                            onClick(picker) {
                                const nowdays = new Date();
                                let year = nowdays.getFullYear();
                                let month = nowdays.getMonth();
                                if (month == 0) {
                                    month = 12;
                                    year = year - 1;
                                }
                                if (month < 10) {
                                    month = "0" + month;
                                }
                                const lastDate = new Date(year, month, 0);
                                const startDate = year + "-" + month + "-01 "; //上个月第一天
                                const endDate =
                                    year + "-" + month + "-" + lastDate.getDate() ; //上个月最后一天
                                const start = startDate;
                                const end = endDate;
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ],
                }
            }
        },
        methods: {
            getOptionUrl(e) {
                e().then(res => {
                    let arr = []
                    res.data.forEach(item => {
                        arr.push({
                            key: item.location_name,
                            value: item.local_id
                        })
                    })
                    this.selectData = arr
                })
            },
            isDatePicker(type) {
                return [
                    "year",
                    "month",
                    "date",
                    "week",
                    "datetime",
                    "datetimerange",
                    "daterange",
                    "monthrange"
                ].includes(type);
            },
            searchEvent() {
                let param = {};
                for (let key in this.searchData) {
                    if (this.searchData[key] || this.searchData[key] === 0) {
                        if (key.includes("-")) {
                            let keys = key.split("-");
                            param[keys[0]] = this.searchData[key][0];
                            param[keys[1]] = this.searchData[key][1];
                        } else {
                            param[key] = this.searchData[key];
                        }
                    }
                }
                // console.log('param',param)
                this.$emit("searchEvent", param);
            }
        }
    }
</script>

<style scoped lang="scss">
    .search-input{
        width: 200px;
    }
</style>
